<template>
  <div class="common-layout">
    <el-container>
      <el-header>
        <div class="name">
          <span class="iconfont icon-home"></span>
          <p>公寓后台管理系统</p>
        </div>

        <div class="search">
          <el-input v-model="input2" placeholder="搜索" :prefix-icon="Search" />
        </div>
        <div class="message">
          <el-icon><Bell /></el-icon>
          <el-dropdown>
            <span class="el-dropdown-link"> 消息提醒 </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item> 您有一条未读信息 </el-dropdown-item>
                <el-dropdown-item> 您有一条未读信息 </el-dropdown-item>
                <el-dropdown-item>您有一条未读信息</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>

        <div class="usermsg">
          <el-avatar>
            <img :src="img" alt="" />
          </el-avatar>
          <el-dropdown>
            <p class="username">
              {{ username }}
              <span class="iconfont icon-xiala"></span>
            </p>

            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item @click="logout">注销</el-dropdown-item>
                <el-dropdown-item @click="set">设置</el-dropdown-item>
                <el-dropdown-item @click="exit">安全退出</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </el-header>

      <el-container style="height: 100vh">
        <el-aside width="280px" style="background: #4ca4fe">
          <el-menu
            default-active="1"
            background-color="transparent"
            :router="true"
            open="handleClose"
          >
            <div class="data">
              <el-menu-item index="/home/datacenter">
                <el-icon
                  ><span class="iconfont icon-shujuzhongxin"></span
                ></el-icon>
                <span>数据中心</span>
              </el-menu-item>
            </div>

            <el-sub-menu index="/home/vip">
              <template #title>
                <el-icon
                  ><span class="iconfont icon-yonghuxinxi"></span
                ></el-icon>
                <span>用户管理</span>
              </template>
              <el-menu-item index="/home/vip">会员管理</el-menu-item>
              <el-menu-item index="/home/notvip">非会员管理</el-menu-item>
              <el-menu-item index="/home/comment">用户评论</el-menu-item>
            </el-sub-menu>

            <el-sub-menu index="3">
              <template #title>
                <el-icon><span class="iconfont icon-fangwu"></span></el-icon>
                <span>房屋管理</span>
              </template>
              <el-menu-item index="/home/share">合租管理</el-menu-item>
              <el-menu-item index="/home/whole">整租管理</el-menu-item>
            </el-sub-menu>

            <el-sub-menu index="4">
              <template #title>
                <el-icon
                  ><span class="iconfont icon-dingdanguanli"></span
                ></el-icon>
                <span>订单管理</span>
              </template>
              <el-menu-item index="/home/ordertotal">订单总览</el-menu-item>
              <el-menu-item index="/home/houseorder">房屋订单</el-menu-item>
              <el-menu-item index="/home/homeclothes">家服订单</el-menu-item>
              <el-menu-item index="/home/serverorder">维修订单</el-menu-item>
            </el-sub-menu>

            <div class="set">
              <el-menu-item index="/home/setting">
                <el-icon><span class="iconfont icon-shezhi"></span></el-icon>
                <span>设置中心</span>
              </el-menu-item>
            </div>
          </el-menu>
        </el-aside>

        <el-main>
          <RouterView></RouterView>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { Calendar, Search } from "@element-plus/icons-vue";
import { useRouter } from "vue-router";
const router = useRouter();
const input2 = ref("");
let username = localStorage.getItem("username");
let img: any = localStorage.getItem("img");

const handleOpen = (key: string, keyPath: string[]) => {
  console.log(key, keyPath);
};
const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath);
};

const set = () => {
  router.push("/home/setting");
};

const logout = () => {
  username = "用户名";
  window.localStorage.removeItem("username");
  window.localStorage.removeItem("password");
  window.localStorage.removeItem("img");
  router.replace("/login");
};

const exit = () => {
  router.replace("/login");
};
</script>

<style lang="less" scoped>
.el-header {
  width: 100%;
  height: 80px;
  background-color: #4ca4fe;
  display: flex;
  align-items: center;
  .name {
    width: 350px;
    height: 80px;
    display: flex;
    align-items: center;
    .icon-home {
      font-size: 26px;
      color: #fff;
    }
    p {
      font-size: 22px;
      margin-left: 22px;
      font-weight: 600;
      line-height: 30px;
      color: #fff;
    }
  }
  .message {
    width: 150px;
    height: 30px;
    display: flex;
    font-size: 20px;
    margin-left: 450px;
    color: #fff;
    .el-icon {
      margin: 5px 15px 0 10px;
    }
    .el-dropdown-link {
      font-size: 18px;
      color: #fff;
      line-height: 30px;
    }
  }
  .el-dropdown-link:hover,
  .username:hover {
    cursor: pointer;
  }
  .usermsg {
    margin-left: 50px;
    font-size: 16px;
    .username {
      font-size: 18px;
      color: #fff;
      margin: 10px 0 0 10px;
    }
  }
}
.search {
  .el-input {
    width: 339px;
    border-radius: 100px;
  }
}

.data {
  border-top: 1px solid #ccc;
}
:deep(.el-sub-menu),
.data,
.set {
  color: #fff;
  border-bottom: 1px solid #ccc;
  .is-active {
    color: #4ca4fe;
    background-color: #fff;
  }
}
:deep(.el-menu > .el-menu-item) {
  padding-left: 20px;
}
:deep(.el-menu-item) {
  color: #fff;
}

:deep(.el-sub-menu__title) {
  color: #fff;
  padding-left: 40px;
  margin-right: 40px;
  .el-icon svg {
    font-size: 20px;
  }
}
// .el-container {
//   position: relative;
// }
:deep(.el-main) {
  padding: 0;
  width: 100%;
}
</style>
